<template>
	<view class="container">
		<view class="top">
			<view class="iconfont">&#xe6a4;</view>
			<view class="user-info">
				<p>账户名<!-- {{username}} --></p>
				<p>ID：12344543<!-- id:{{userid}} --></p>
			</view>
			<navigator>
				<text>编辑资料</text>
				<i class="icon"></i>
			</navigator>
		</view>
		
		<view class="vip">
			<!-- <text>{{vip-info}}</text> -->
			<text class="big">加入会员</text>
			<text class="small">领取专属健康调理方案</text>
			<button @click="">立即加入</button>
		</view>
		<view class="bar">
			<navigator url="#">
				<view class="orders">
					<i class="iconfont"> &#xe6a9; </i>
					<p>我的订单</p>
				</view>
			</navigator url="#">
			<navigator>
				<view class="records">
					<i class="iconfont"> &#xe6a9; </i>
					<p>历史记录</p>
				</view>
			</navigator>
		</view>
		<view class="use-list">
			<navigator url="#" class="row"><p><i class="iconfont">&#xe6a9;</i>意见反馈</p></navigator>
			<navigator url="#" class="row"><p><i class="iconfont">&#xe6a9;</i>用户协议</p></navigator>
		</view>
	</view>
</template>

<script >
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>
@import "../../common/common.css";
@import "../../static/icon/font/iconfont.css";

.container{
	width:100%;
}

.top{
	width: 96%;
	margin:auto;
	display: flex;
	align-items: center;
}
.top>.iconfont{
	font-size: 100rpx;
	margin: 0 10rpx;
}

.user-info p:first-child{
	font-size: 36rpx;
}
.user-info p:last-child{
	font-size: 10rpx;
}

.vip{
	width: 96%;
	height: 80rpx;
	line-height: 60rpx;
	margin: auto;
	text-align: center;
	background-color: lightgoldenrodyellow;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 20rpx;
}

.vip .small{
	font-size: 12rpx;
	margin: 0 20rpx;
}
.vip button{
	width: 18%;
	height:40rpx;
	font-size: 12rpx;
	line-height: 40rpx;
	margin: 0;
}

.bar{
	width: 100%;
	height: 100rpx;
	display:flex;
	justify-content: center;
	align-items: center;
	gap:20%;
	margin-top: 20rpx;
}
.orders, .records{
	text-align: center;
}
.bar .iconfont{
	font-size: 60rpx;
	color: skyblue;
}

.use-list{
	width: 100%;
	display: flex;
	flex-direction: column;
	margin: 20rpx 40rpx;
}
.use-list .row{
	width: 96%;
	height: 60rpx;
	line-height: 60rpx;
}
.row .iconfont{
	font-size:40rpx;
	margin-right: 15rpx;
}
</style>
